<template>
  <div id="login-page">
    <div class="page-title page-title-white" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>可可商城登录</span>
    </div>
    <div id="logo"></div>
    <div id="change-button">
      <div class="item">
        <a href="javascript:void(0)" @click="$router.push('/Login')">密码</a>
      </div>
      <div class="item">
        <a href="javascript:void(0)" class="curr">手机号</a>
      </div>
    </div>
    <el-form class="form login-form" label-width="100px" :model="form" :rules="rules" ref="ruleForm" size="medium">
      <el-form-item label="手机号" prop="username">
        <el-col :span="20">
          <el-input
            placeholder="请输入 手机号"
            v-model.trim="form.username"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="手机验证码" prop="verify">
        <el-col :span="12">
          <el-input
            placeholder="请输入验证码"
            v-model.trim="form.verify"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="10">
          <send-sms :get-mobile="getMoblie" event-type="login"/>
        </el-col>
      </el-form-item>
      <el-form-item label-width="0px" align="center">
        <el-button type="danger" id="login-submit-button" @click="submit()" :loading="isLoading" :disabled="!isAgree">登录</el-button>
        <div>
          <my-privacy-agreement :callback="setIsAgree"/>
        </div>
        <div id="login-submit-button-bottom-box">
          <div class="left">
            <a href="javascript:void(0)" @click="$router.push('/Register')">前去注册</a>
          </div>
          <div class="right">
            <a href="javascript:void(0)" @click="$router.push('/ResetPassword')">忘记密码?</a>
          </div>
        </div>
<!--        <el-button type="success" @click="$router.push('/Register')">无账号，前去注册</el-button>-->
      </el-form-item>
    </el-form>


    <third-user-login-box/>

    <div style="position: absolute; bottom: 25px; text-align: right; width: 98%; padding-right: 5px;">
<!--      <el-button type="info" icon="el-icon-user" @click="$router.push('/')">继续游客访问</el-button>-->
    </div>
  </div>
</template>

<script>
import SendSms from '../common/SendSms'
import MyPrivacyAgreement from '../common/MyPrivacyAgreement'
import ThirdUserLoginBox from '../common/ThirdUserLoginBox'
export default {
  name: "LoginSms",
  components: {ThirdUserLoginBox, MyPrivacyAgreement, SendSms},
  mounted: function () {
    if (typeof this.CurrUser.IsLogin === 'function' && this.CurrUser.IsLogin()) {
      this.$router.push('/')
    }
    // 非开发环境,清除数据
    if (process.env.NODE_ENV === 'development') {
      // this.form.username = 'liuxh'
      // this.form.password = 'a123456'
    }

    let $this=this
    $this.bus.$on('MyPrivacyAgreementCallBus',function () {
      if (localStorage.getItem("MyPrivacyAgreement")==='1'){
        $this.isAgree=true
      } else{
        $this.isAgree=false
      }
      $this.$forceUpdate()
    })
  },
  destroyed () {
    this.bus.$off('MyPrivacyAgreementCallBus')
  },
  data: function () {
    return {
      isLoading: false,
      isAgree:false,
      form: {
        username: '',
        password: '',
        verify: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入 手机号', trigger: ['blur','change']},
          {min: 3, message: '长度在 3 个字符以上', trigger: ['blur','change']}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: ['blur','change']},
          {min: 6, message: '长度在 6 个字符以上', trigger: ['blur','change']}
        ],
        verify: [
          {required: true, message: '请输入验证码', trigger: ['blur','change']},
          {min: 1, max: 6, message: '验证码填写错误', trigger: ['blur','change']}
        ]
      }
    }
  },
  methods: {
    setIsAgree:function (isAgree) {
      this.isAgree=isAgree
      this.$forceUpdate()
    },
    getMoblie:function () {
      return this.form.username
    },
    // 提交
    submit: function () {
      var $this = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          $this.isLoading = true
          $this.MyRequest($this.ApiDoNameShop+'Public/loginByMobileCode', {
            mobile:$this.form.username,
            mobileVerifyCode:$this.form.verify,
          }, function (data) {
            $this.isLoading = false
            $this.CurrUser.setCache({
              token: data.token,
              username: $this.form.username,
            })
            // $this.bus.$emit('UserLoginCallBus')
            $this.$router.push("/")
          }, function (data) {
            $this.isLoading = false
            $this.successTip(data.message,'error')
            // $this.form.password = ''
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetForm () {
      this.$refs.ruleForm.resetFields()
    },
    register:function () {
      // this.$alert('请联系向: 623862474@qq.com 发送邮件进行注册。')
    }
  }
}
</script>

<style scoped>

</style>
